import React, { useState, memo, useMemo, useEffect } from "react";
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro';

import { Popup, Button, Field, } from '@antmjs/vantui'
import { createAuth, cligibleCommitment } from '@/services/index'
import { useDispatch, useSelector } from "react-redux";
import { submitInvestorClass } from '@/services/api/eligible_investors';
import { stringifyUrl } from 'query-string';

import './index.scss'


function CertifiedPrompt(props) {
  const { allowClose = true, tabName = '产品' } = props
  const dispatch = useDispatch()
  let { userInfo, stepObj } = useSelector(state => state.certified)
  let [statusStep, setStatusStep] = useState(0)
  useEffect(() => {
    if (!stepObj.step0) {
      setStatusStep(0)
    } else if (!stepObj.step1) {
      setStatusStep(1)
    } else if (!stepObj.step2) {
      setStatusStep(2)
    } else if (stepObj.step0 && stepObj.step1 && stepObj.step2) {
      props.setDialogClose()
      setStepShow(false)
    }
  }, [stepObj])
  let controlShow = props.dialogShow
  // const [controlShow, setControlShow] = useState(props.dialogShow)
  const [stepShow, setStepShow] = useState(false)

  const typeList = useMemo(() => {
    return ['普通投资者', '专业投资者']
  }, [])
  const stepList = useMemo(() => {
    return ['实名认证', '合格投资者承诺', '风险评测']
  }, [])

  let [investorClass, setInvestorClass] = useState(1)
  let [userMsg, setUserMsg] = useState({
    name: userInfo.user?.userName ?? '',
    credCode: '',
    investorClass: 1,
    credType: 1,
    certificateValidity: '-1'
  })
  const nextStep = () => {
    if (statusStep < 2) {
      props.setDialogClose()
      setStepShow(true)
    } else {
      props.setDialogShow()

      let data = { ...userInfo.userRisk, isOldRisk: false }
      let url = stringifyUrl({ url: `/eligible_investors/risk_assessment/index`, query: data }, { encode: false })
      Taro.navigateTo({
        url: url
      })

    }




  }

  const setUser = (value, key) => {
    let obj = userMsg
    obj[key] = value
    setUserMsg(obj)
    if (key == 'investorClass') {
      setInvestorClass(value)
    }
  }

  const submit = (step) => {
    // 实名认证
    if (step == 0) {//submitInvestorClass
      if (userInfo.userRisk?.authCertiStatus == 3) {
        // 如果已经实名过了，只上传投资者类型
        submitInvestorClass(userMsg.investorClass).then(() => {
          dispatch(
            {
              type: 'certified/asyncGetUserDetail',
            }
          )
        })
      } else {
        createAuth(userMsg).then(() => {

          dispatch(
            {
              type: 'certified/asyncGetUserDetail',

            }
          )



        })
      }

    } else if (step == 1) {
      cligibleCommitment().then(() => {
        setStepShow(false)
        dispatch(
          {
            type: 'certified/asyncGetUserDetail',
            callback: (res) => {
              if (!stepObj.step2) {
                let data = { ...userInfo.userRisk, isOldRisk: false }
                let url = stringifyUrl({ url: `/eligible_investors/risk_assessment/index`, query: data }, { encode: false })
                Taro.navigateTo({
                  url: url
                }).then(() => {
                  props.setDialogShow()
                })
              }
            }
          }

        )

      })
    }



  }
  return (
    <>
      <Popup show={controlShow} position='bottom' className='popup1' onClickOverlay={() => allowClose ? props.setDialogClose() : false}>
        <View className='title'>认证提示</View>
        <View className='title-2'>根据监管要求，完成以下步骤即可查看{tabName}信息：</View>
        <View className='step-ul'>
          {
            stepList.map((step, index) => {
              return (<View className={`step ${stepObj[`step${index}`] ? 'is-finish' : ''}`} key={step} >
                <View className='circle'></View>
                {step}
              </View>)
            })
          }
        </View>
        <Button type='info' className='info-btn' onClick={() => nextStep()}>{statusStep == 0 ? '立即认证' : '继续认证'}</Button>
      </Popup>
      <Popup round show={stepShow} onClose={() => setStepShow(false)} className='popup2' onClickOverlay={() => props.setDialogShow()}>
        {
          statusStep == 0 ?
            <View className='dialog-card'>
              <View className='title'>实名认证</View>
              <View className='tip'>根据监管要求，查看产品需先进行实名信息填写：</View>
              {userInfo.userRisk.authCertiStatus == 3}
              <View className='field-view'>
                <Field placeholder='姓名' inputAlign='left' value={userMsg.name} onChange={(e) => setUser(e.detail, 'name')} disabled={userInfo.userRisk.authCertiStatus == 3} />
              </View>
              {
                userInfo.userRisk.authCertiStatus == 3 ? null :
                  <View className='field-view'>
                    <Field placeholder='身份证号' inputAlign='left' value={userMsg.credCode} onChange={(e) => setUser(e.detail, 'credCode')} />
                  </View>
              }


              {
                userInfo.userRisk?.investorClass != 1 && userInfo.userRisk?.investorClass != 2 ?
                  <>
                    <View className='type-btn-group'>
                      <View className='type-title'>投资者类型</View>
                      <View className='investor-type'>
                        {
                          typeList.map((item, index) => {

                            return (<View key={index} className={`${index + 1 === investorClass ? 'is-active' : ''}`} onClick={() => setUser(index + 1, 'investorClass')}>{item}</View>)
                          })
                        }
                      </View>
                    </View>
                  </>
                  :
                  null
              }


              <Button onClick={() => submit(statusStep)}>确定</Button>
            </View>
            :
            statusStep == 1 ?
              <View className='dialog-card2'>
                <View className='dialog-center'>
                  <View className='title-2'>合格投资者承诺</View>
                  <View className='p'>1、本人/本单位承诺符合《私募投资基金监督管理暂行办法》及其他法律
                    法 规、证监会规定的合格投资者标准，具有相应的风险识别能力风险承受能
                    力。根据我国《私募投资基金监督管理暂行办法》的规定，私募基金合格投
                    资者的标准如下:</View>
                  <View className='p'>具备相应风险识别能力和风险承担能力，投资于单只私募
                    基金的金额不低于 100 万元且符合下列相关标准的机构和个人：
                    <View className='p-item'> 1、净资产不低于 1000 万元的机构；</View>
                    <View className='p-item'> 2、个人金融资产不低于 300 万元或者最近三年个人年均收入不低于 50 万
                      元。</View>
                    前款所称金融资产包括银行存款、股票、债券、基金份额、资产管理计
                    划、 银行理财产品、信托计划、保险产品、期货权益等。 本人/本单位承诺
                    向基金管 理人提供的有关投资目的、投资偏好、投资限制 和风险承受能力等
                    情况真实合法、完整有效，不存在任何重大遗漏或误导性陈述， 前述信息资
                    料如发生任何实质性变更，本人/本单位应当及时书面告知基金管理人或销售机构。
                  </View>
                  <View className='p'>2、本人/本单位承诺用于认购/申购基金份额的财产为投资者拥有合法所
                    有权 或处分权的资产，保证该等财产的来源及用途符合法律法规和相关政策
                    规定，不 存在非法汇集他人资金投资的情形，不存在不合理的利益输送、关
                    联交易及洗钱 等情况，本人/本单位保证有完全及合法的权利委托基金管理人
                    和基金托管人进 行基金财产的投资管理和托管业务。</View>
                  <View className='p'>3、本人/本单位承诺，基金管理人有权要求本人/本单位提供资产来源及
                    用 途合法性证明，对资产来源及用途及合法性进行调查，本人/本单位愿意配
                    合。</View>
                  <View className='p'>4、本人/本单位承诺，本人/本单位在参与贵公司发起设立的私募基金的
                    投 资过程中，如果因存在欺诈、隐瞒或其他不符合实际情况的陈述所产生的
                    一切责 任，由本人/本单位自行承担，与贵司无关。</View>


                </View>
                <Button onClick={() => submit(statusStep)} className='confirm'>确认</Button>


              </View>
              : null
        }
      </Popup>
    </>


  )
}

export default memo(CertifiedPrompt)
